<script setup lang="ts">
import { reactive, ref, PropType } from 'vue';
import type { IFormValue } from './type';
import type { IRoleList } from '../../type';
import type { FormInstance } from 'element-plus';

const emits = defineEmits(['handleSearch', 'handleAdd']);
defineProps({
	roleList: {
		type: Array as PropType<IRoleList[]>,
		required: true,
	},
});

const formRef = ref<FormInstance>();
const formValue = reactive<IFormValue>({
	role: '',
});

// 点击查询
const clickSearch = () => {
	emits('handleSearch', formValue);
};
// 点击重置
const clickReset = () => {
	formRef.value?.resetFields();
};
// 点击新增
const clickAdd = () => {
	emits('handleAdd');
};
</script>

<template>
	<div class="user-form">
		<el-form ref="formRef" :model="formValue">
			<el-form-item label="角色：" prop="role">
				<el-select v-model="formValue.role" placeholder="选择角色">
					<el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<div>
					<el-button @click="clickSearch">查询</el-button>
					<el-button @click="clickReset">重置</el-button>
				</div>
				<div>
					<el-button @click="clickAdd">新增</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
